<template>
    <div class="container">
        <!-- 数据大屏展示内容区域 -->
        <div class="screen" ref="screen">
            <div class="top">
                <Top/>
            </div>
            <div class="bottom">
                <div class="left">
                    <Tourist class="tourist"/>
                    <Sex class="sex"/>
                    <Age class="age"/>

                </div>
                <div class="center">
                    <Map class="map"></Map>
                    <Line class="line"></Line>
                </div>
                <div class="right">
                    <Rank class="rank"></Rank>
                    <Year class="year"></Year>
                    <Counter class="counter"></Counter>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入顶部的子组件
import Top from './components/top/index.vue';
//引入左侧三个子组件
import Tourist from './components/tourist/index.vue';
import Age from './components/age/index.vue';
import Sex from './components/sex/index.vue';
//引入中间的两个子组件
import Map from './components/map/index.vue';
import Line from './components/line/index.vue';
//引入右侧三个子组件
import Rank from './components/rank/index.vue';
import Year from './components/year/index.vue';
import Counter from './components/couter/index.vue';
//获取数据大屏展示内容盒子的DOM元素
let screen = ref();
onMounted(() => {
    //一挂载先缩放一次，再把左上角的点归位
    screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})
//定义大屏缩放比例
function getScale(w = 1920, h = 1080) {
    const ww = window.innerWidth / w;//用设备的宽/原型的宽，得到缩放比例
    const wh = window.innerHeight / h;//例如原型为2，现设备为4，wh=2倍
    return ww < wh ? ww : wh;
    //ww<wh情况: 1920变小/1920(ww)   1080变大/1080(wh)
    //ww>wh情况:1920变大/1920(ww)   1080变小/1080(wh)
}
//视口发生变化时
window.onresize = () => {
    // 根据比例进行放缩，再把基点归位
    screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    background: url(./images/bg.png) no-repeat;
    background-size: cover;

    .screen {
        /* 加定位，把原本的定位基点固定 */
        position: fixed;
        width: 1920px;
        height: 1080px;
        /* transform: scale(1.1);是按背景图中心进行缩放，会把内容顶出去 */
        /*把基点移到左上角 */
        transform-origin: left top;
        /* 基点移到中心 */
        left: 50%;
        top: 50%;
        .top{
            width: 100%;
            height:40px;
        }
        .bottom{
            display: flex;
            .left{
                flex:1;
                height: 1040px;
                display: flex;
                flex-direction: column;
                .tourist{
                    flex:1.5;
                }
                .sex{
                    flex: 1;
                }
                .age{
                    flex: 1;
                }
            }
            .center{
                flex:2;
                display: flex;
                flex-direction: column;
                .map{
                    flex: 3;
                }
                .line{
                    flex: 1;
                }
            }
            .right{
                flex:1;
                display: flex;
                flex-direction: column;
                margin-left: 40px;
                .rank{
                    flex:1.5;
                }
                .year{
                    flex: 1;
                }
                .counter{
                    flex: 1;
                }
            }
        }
    }
}
</style>
